<template>
  <!-- 省市区街道输入框 -->
  <div>
    <label>省：</label>
    <select v-model="province" @change="onProvinceChange">
      <option value="">请选择省份</option>
      <option v-for="prov in provinces" :value="prov" :key="prov">
        {{ prov }}
      </option>
    </select>
    <label>市：</label>
    <select v-model="city" @change="onCityChange">
      <option value="">请选择城市</option>
      <option v-for="c in cities" :value="c" :key="c">{{ c }}</option>
    </select>
    <label>区：</label>
    <select v-model="district" @change="onDistrictChange">
      <option value="">请选择区县</option>
      <option v-for="d in districts" :value="d" :key="d">{{ d }}</option>
    </select>
    <label>街道：</label>
    <select v-model="street">
      <option value="">请选择街道</option>
      <option v-for="s in streets" :value="s" :key="s">{{ s }}</option>
    </select>
    <button @click="getLocation">获取中心经纬度</button>
  </div>

  <!-- 中心经纬度显示 -->
  <div>中心经纬度为：{{ center }}</div>

  <!-- 地图容器 -->
  <div id="map-container"></div>
</template>

<script>
import { defineComponent, ref } from "vue";
import { load } from "@amap/amap-jsapi-loader";

export default defineComponent({
  name: "LocationPicker",
  setup() {
    const province = ref("");
    const city = ref("");
    const district = ref("");
    const street = ref("");
    const center = ref("");

    let AMap;
    let geocoder;

    // 省市区街道数据
    const provinces = ["北京", "上海", "广东"]; // 省份数据示例
    const cities = ref([]); // 城市数据
    const districts = ref([]); // 区县数据
    const streets = ref([]); // 街道数据

    // 加载高德地图
    load({
      key: "f819c82141a53cedf6c86346c694e12f",
      version: "2.0",
      plugins: ["AMap.Geocoder"],
    }).then((AMapInstance) => {
      AMap = AMapInstance;
      geocoder = new AMap.Geocoder();
    });

    // 根据省份获取城市列表
    const onProvinceChange = () => {
      if (province.value) {
        // 模拟根据省份获取城市列表的过程
        // 可以根据实际需求替换为异步请求或其他方式获取城市数据
        switch (province.value) {
          case "北京":
            cities.value = ["北京市"];
            break;
          case "上海":
            cities.value = ["上海市"];
            break;
          case "广东":
            cities.value = ["广州市", "深圳市"];
            break;
          default:
            cities.value = [];
            break;
        }
      } else {
        cities.value = [];
      }
      district.value = "";
      districts.value = [];
      street.value = "";
      streets.value = [];
    };

    // 根据城市获取区县列表
    const onCityChange = () => {
      if (city.value) {
        // 模拟根据城市获取区县列表的过程
        // 可以根据实际需求替换为异步请求或其他方式获取区县数据
        switch (city.value) {
          case "北京市":
            districts.value = ["东城区", "西城区", "朝阳区", "海淀区"];
            break;
          case "上海市":
            districts.value = ["黄浦区", "徐汇区", "静安区", "普陀区"];
            break;
          case "广州市":
            districts.value = ["天河区", "越秀区", "海珠区", "荔湾区"];
            break;
          case "深圳市":
            districts.value = ["福田区", "罗湖区", "南山区", "宝安区"];
            break;
          default:
            districts.value = [];
            break;
        }
      } else {
        districts.value = [];
      }
      street.value = "";
      streets.value = [];
    };

    // 根据区县获取街道列表
    const onDistrictChange = () => {
      if (district.value) {
        // 模拟根据区县获取街道列表的过程
        // 可以根据实际需求替换为异步请求或其他方式获取街道数据
        switch (district.value) {
          case "东城区":
            streets.value = ["东华门街道", "交道口街道", "景山街道"];
            break;
          case "西城区":
            streets.value = ["西长安街街道", "新街口街道", "月坛街道"];
            break;
          case "朝阳区":
            streets.value = ["三里屯街道", "望京街道", "亚运村街道"];
            break;
          case "海淀区":
            streets.value = ["中关村街道", "上地街道", "西二旗街道"];
            break;
          default:
            streets.value = [];
            break;
        }
      } else {
        streets.value = [];
      }
    };

    // 获取中心经纬度
    const getLocation = () => {
      const address = `${province.value}${city.value}${district.value}${street.value}`;

      geocoder.getLocation(address, (status, result) => {
        if (status === "complete" && result.info === "OK") {
          center.value = `中心经度：${result.geocodes[0].location.lng}，中心纬度：${result.geocodes[0].location.lat}`;
        } else {
          center.value = "获取中心经纬度失败";
        }
      });
    };

    return {
      province,
      city,
      district,
      street,
      center,
      provinces,
      cities,
      districts,
      streets,
      onProvinceChange,
      onCityChange,
      onDistrictChange,
      getLocation,
    };
  },
});
</script>

<style scoped>
#map-container {
  width: 100%;
  height: 300px;
}
</style>
